<template>
  <div class="source">
    <topBar :title="title"></topBar>
    <div class="topList">
      <div v-for="(item, index) in characterList" :key="index">
        <div class="square"></div>
        <div class="html">{{item.text}}</div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <el-table border style="width: 100%" :data="tableDataOne"
            :header-cell-style="{background: '#0070C0', color: '#ffffff'}">
          <el-table-column
            v-for="(item, index) in headerList"
            :label="item.labelName"
            :prop="item.propName"
            :key="index"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <div class="right">
        <el-table
            border
            style="width: 100%"
            :cell-style="cellStyle"
            :header-cell-style="{background: '#0070C0', color: '#ffffff',padding: '0',height:'26px'}"
            :data="tableDataTwo">
            <el-table-column
                v-for="(item, index) in headerArr"
                :label="item.labelName"
                :prop="item.propName"
                :key="index"
                align="center"
            ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "./topBar";
import { source } from "@/api/codeIncome/analysis";

export default {
  name: "customerType",
  components: {
    topBar,
  },
  props: {
    searchData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    searchData: {
      handler(newName) {
          this.getData();
      },
      deep: true,
    },
  },
  data() {
    return {
      title: "码号收入 – 按来源",
      characterList: [],
      tableDataOne: [],
      headerList: [],
      tableDataTwo:[],
      headerArr: []
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    cellStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex<10) {
            return "background: #C6E0B4;padding:0;color:black;"
        } else {
            return "background: #FCE4D6;padding:0;color:black;"
        }
    },
    getData() {
      source({
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.characterList = res.data.characterList;
          let arr1 = [];
          let arr2 = [];
          res.data.dataList.map((item) => {
            if (item.code == "S001") {
              this.tableDataOne = item.data;
              item.strList.map((its) => {
                if (its.code == "header") {
                  its.datas.map((it, index) => {
                    let obj = {};
                    let propArr = [
                      "source1",
                      "lastIncome",
                      "thisIncome",
                      "hbInrease",
                    ];
                    obj["labelName"] = it;
                    obj["propName"] = propArr[index];
                    arr1.push(obj);
                  });
                  this.headerList = arr1;
                }
              });
            }
            if (item.code == "S002") {
              this.tableDataTwo = item.data;
              item.strList.map((its) => {
                if (its.code == "header") {
                  its.datas.map((it, index) => {
                    let obj = {};
                    let propArr = [
                      "ruleName",
                      "source1",
                      "source2",
                      "subject1",
                      "subject2",
                      "lastIncome",
                      "thisIncome",
                      "hbInrease",
                    ];
                    obj["labelName"] = it;
                    obj["propName"] = propArr[index];
                    arr2.push(obj);
                  });
                  this.headerArr = arr2;
                }
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.source {
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
</style>

<style scoped lang="scss">
.source {
  margin-top: 20px;
}
.topList {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  > div {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .square {
    margin-top: 15px;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    background: #c00000;
    transform: rotate(45deg);
  }
  .html {
    flex: 1;
    font-size: 20px;
    color: black;
    letter-spacing: 1px;
    line-height: 40px;
  }
}
.bottom {
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  .left {
    width: 35%;
  }
  .right {
    width: 64%;
  }
}
</style>
